<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>神奇的卡片 Hover 效果与 Blur 的特性探究</title>
    <link rel="stylesheet" href="../../styles/scss/animation.css" />
  </head>
  <body>
    <!--
        渐变
            1 纯色 有三种情况（0 - 截至点） | （起始点 - 截止点） | （起始点 - 终点）
            2 过渡阶段 除了纯色，其他部分都是过渡区域，过渡时 过渡中点 一般是中间位置 
        
        硬线无渐变
            1 使用多个位置的色标。
            2 值较低的后续色标将覆盖上一个色标的值.
    -->
    <div class="four-g-container">
      <!--
            每张图背后的虚化图效果
        -->
      <!--最终效果-->
      <div id="g-container">
        <div id="g-mask"></div>
        <div class="g-img"></div>
      </div>

      <!--conic-gradient + 虚化图-->
      <div class="g-test">
        <div class="g-mask"></div>
        <div class="g-img"></div>
      </div>

      <!--conic-gradient-->
      <div class="test2"></div>

      <!--filter自带内阴影-->
      <div class="test3">
        <div>
          <div></div>
        </div>
        <div>
          <div></div>
        </div>
      </div>

      <!--radial-gradient 会覆盖整个test4-->
      <div class="test4"></div>
      <!--查看改元素的rect-->
      <div>
        <div id="test5"></div>
        <div id="test6"></div>
      </div>
    </div>
    <script>
      const container = document.getElementById("g-container");
      const test4 = document.querySelector(".test4");
      const mask = document.getElementById("g-mask");
      container.addEventListener("mousemove", (event) => {
        mask.style.visibility = "visible";
        const target = event.target;
        const rect = target.getBoundingClientRect();
        // console.log(event);
        /**
         * 上边和左边 指的是 浏览器边界
         * rect
         *  width/height: 元素的宽高
         *  top/right/bottom/left 元素的四条线 离浏览器边界距离
         *  x/y: 元素距离 浏览器边界
         *
         *
         * event
         *   clientX/clientY: event发生的位置和浏览器边界的距离
         *   offsetX/offsetY：
         *      offsetX = clientX - event关联元素距离浏览器顶部的距离
         *      offsetY = clientY - event关联元素距离浏览器左部的距离
         */

        // console.log(rect);
        var percentX = (
          Math.min(Math.max(event.offsetX / rect.width, 0), 1) * 100
        ).toFixed(2);
        var percentY = (
          Math.min(Math.max(event.offsetY / rect.height, 0), 1) * 100
        ).toFixed(2);

        // console.log("X: " + percentX + "%", "Y: " + percentY + "%");

        container.setAttribute("style", `--x: ${percentX}%;--y: ${percentY}%;`);
        test4.setAttribute("style", `--x: ${percentX}%;--y: ${percentY}%;`);
      });
      container.addEventListener("mouseout", (event) => {
        mask.style.visibility = "hidden";
      });
    </script>
  </body>
</html>
